<template>
  <view class="withdraw-account-container">
    <!-- 导航栏 -->
    <nav-bar></nav-bar>
    <!-- 账户列表 -->
    <view class="account-list">
      <!-- 支付宝账户 -->
      <view class="account-item" @tap="goToSetAccount('alipay')">
        <view class="account-left">
          <image src="/static/icon/alipay.png" class="account-icon" mode="aspectFit"></image>
          <text class="account-name">提现至支付宝</text>
        </view>
        <view class="account-right">
          <text class="account-status" v-if="!alipayAccount">请先设置提现账户</text>
          <text class="account-info" v-else>{{ alipayAccount }}</text>
          <text class="iconfont icon-right"></text>
        </view>
      </view>
      
      <!-- 银行卡账户 -->
      <view class="account-item" @tap="goToSetAccount('bank')">
        <view class="account-left">
          <image src="/static/icon/bank-card.png" class="account-icon" mode="aspectFit"></image>
          <text class="account-name">提现至银行卡</text>
        </view>
        <view class="account-right">
          <text class="account-status" v-if="!bankAccount">请先设置提现账户</text>
          <text class="account-info" v-else>{{ bankAccount }}</text>
          <text class="iconfont icon-right"></text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import TechNavBar from '@/components/tech-nav-bar.vue'
import NavBar from '@/components/nav-bar/nav-bar.vue'
export default {
  components: {
    TechNavBar,
    NavBar
  },
  
  data() {
    return {
      alipayAccount: '',
      bankAccount: '',
      accountList: [] // 存储所有账户信息
    }
  },
  
  onLoad() {
    this.loadAccountInfo()
  },
  
  // 页面显示时刷新数据
  onShow() {
    this.loadAccountInfo()
  },
  
  methods: {
    // 加载账户信息
    async loadAccountInfo() {
      uni.showLoading({
        title: '加载中...'
      })
      
      try {
        // 从本地存储获取技师ID
        const userInfo = uni.getStorageSync('userInfo');
        const techId = userInfo ? userInfo.techId : null;
        
        if (!techId) {
          uni.showToast({
            title: '未获取到技师信息，请重新登录',
            icon: 'none'
          });
          return;
        }
        
        // 构建请求参数
        const params = {
          technicianId: techId
        };
        
        // 调用后端API获取账户列表
        const result = await uni.request({
          url: `${uni.$config.baseUrl}/tehcAccount/tehcAccount/listAll`,
          method: 'GET',
          data: params,
          header: {
            'Authorization': uni.getStorageSync('token')
          }
        });
        
        if (result.data.code === 200) {
          // 获取账户列表
          this.accountList = result.data.rows || [];
          
          // 处理支付宝账号和银行卡账号
          this.processAccountList();
        } else {
          throw new Error(result.data.msg || '获取账户信息失败');
        }
      } catch (err) {
        console.error('获取账户信息失败:', err);
        uni.showToast({
          title: '获取账户信息失败',
          icon: 'none'
        });
      } finally {
        uni.hideLoading();
      }
    },
    
    // 处理账户列表，提取支付宝和银行卡信息
    processAccountList() {
      // 重置账户信息
      this.alipayAccount = '';
      this.bankAccount = '';
      
      // 遍历账户列表
      this.accountList.forEach(account => {
        // 支付宝账户 (accountType = 1)
        if (account.accountType === 1 && account.account) {
          this.alipayAccount = this.formatAccount(account.account, 'alipay');
        }
        // 银行卡账户 (accountType = 2)
        else if (account.accountType === 2 && account.cardNumber) {
          const bankInfo = account.bankName ? `${account.bankName} ` : '';
          this.bankAccount = bankInfo + this.formatAccount(account.cardNumber, 'bank');
        }
      });
    },
    
    // 格式化账户显示
    formatAccount(account, type) {
      if (!account) return '';
      
      if (type === 'alipay') {
        // 支付宝账号：保留前3位和后4位，中间用****代替
        if (account.includes('@')) {
          // 邮箱格式
          const parts = account.split('@');
          const username = parts[0];
          const domain = parts[1];
          if (username.length > 3) {
            return username.substring(0, 3) + '****@' + domain;
          }
          return account;
        } else {
          // 手机号格式
          return account.replace(/(\d{3})\d*(\d{4})/, '$1****$2');
        }
      } else if (type === 'bank') {
        // 银行卡：仅显示后4位
        return `(${account.slice(-4)})`;
      }
      return account;
    },
    
    // 跳转到账户设置页面
    goToSetAccount(type) {
      uni.navigateTo({
        url: `/pages/technician/set-account?type=${type}`
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.withdraw-account-container {
  min-height: 100vh;
  background: #F5F5F5;
  
  .account-list {
    margin-top: 20rpx;
    background: #FFFFFF;
    
    .account-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 2rpx solid #F5F5F5;
      
      &:last-child {
        border-bottom: none;
      }
      
      .account-left {
        display: flex;
        align-items: center;
        
        .account-icon {
          width: 48rpx;
          height: 48rpx;
          margin-right: 20rpx;
          filter: brightness(0) saturate(100%) invert(45%) sepia(45%) saturate(2120%) hue-rotate(194deg) brightness(96%) contrast(88%);
        }
        
        .account-name {
          font-size: 32rpx;
          color: #333333;
        }
      }
      
      .account-right {
        display: flex;
        align-items: center;
        
        .account-status {
          font-size: 28rpx;
          color: #999999;
          margin-right: 10rpx;
        }
        
        .account-info {
          font-size: 28rpx;
          color: #666666;
          margin-right: 10rpx;
        }
        
        .icon-right {
          font-size: 32rpx;
          color: #CCCCCC;
        }
      }
    }
  }
}
</style> 